<template>
  <div class="script-config-content win-flex-row">
    <script-category @categorySuccess="categorySelect" />
    <div class="oper_content pl10 pr10">
      <el-tabs v-model="currTabName">
        <el-tab-pane label="主音频" name="mainAudio">
          <MainAudio :fileList="mainAudioFileList" @getList="getList" />
        </el-tab-pane>
        <el-tab-pane label="音画同步视频" name="mainVideo">
          <MainVideo :fileList="mainVideoFileList" @getList="getList" />
        </el-tab-pane>
        <el-tab-pane label="关键字回复" name="keyword">
          <el-input v-model="keywordContent" type="textarea" :rows="12" placeholder="请输入关键字回复"></el-input>
          <div class="oper_btn_content">
            <el-button type="primary" size="small" @click="saveContent(1)">保存</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="用户新进" name="userEnter">
          <el-input v-model="userEnterContent" type="textarea" :rows="12" placeholder="请输入用户新进"></el-input>
          <div class="oper_btn_content">
            <el-button type="primary" size="small" @click="saveContent(2)">保存</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getAllList as getItemAllList, saveEntity } from '@/api/script/item';
import { replaceBr } from '@/utils/util';
export default {
  name: 'ScriptConfig',
  components: {
    ScriptCategory: resolve => require(['./category.vue'], resolve),
    MainAudio: resolve => require(['./mainAudio.vue'], resolve),
    MainVideo: resolve => require(['./mainVideo.vue'], resolve),
  },
  data() {
    return {
      currTabName: 'mainAudio',
      mainAudioFileList: [],
      mainVideoFileList: [],
      keywordId: '',
      userEnterId: '',
      keywordContent: '',
      userEnterContent: '',
      pageParams: {
        pageNum: 1,
        pageSize: 60,
        queryParams: {
          F_isDel_eq: 0,
        }
      },
    };
  },
  created() {
  },
  computed: {
    pageConfig() {
      return this.$store.state.page.config;
    },
  },
  methods: {
    categorySelect(scriptCategoryId) {
      this.scriptCategoryId = scriptCategoryId;
      this.getList();
    },
    getList() {
      getItemAllList(this.scriptCategoryId).then((res) => {
        this.keywordContent = '';
        this.keywordId = '';
        this.userEnterContent = '';
        this.userEnterId = '';
        this.mainAudioFileList = [];
        if (res.result) {
          this.keywordContent = res.result.keyword;
          this.keywordId = res.result.keywordId;
          this.userEnterContent = res.result.userEnter;
          this.userEnterId = res.result.userEnterId;
          this.mainAudioFileList = res.result.mainAudioFileList;
          this.mainVideoFileList = res.result.mainVideoFileList;
          if (this.mainAudioFileList.length > 0) {
            this.mainAudioFileList.forEach(item => {
              item.content = replaceBr(item.content);
            });
          }
        }
      });
    },
    saveContent(type) {
      let content = '', id = "";
      if (type == 1) {
        id = this.keywordId;
        content = this.keywordContent;
      } else if (type == 2) {
        id = this.userEnterId;
        content = this.userEnterContent;
      }
      saveEntity({
        id: id,
        scriptContent: content
      }).then(res => {
        this.$modal.msgSuccess('操作成功');
        this.$modal.closeLoading();
        this.getList();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.script-config-content {
  height: calc(100vh - 110px);

  .oper_content {
    border: 1px solid var(--color-border-first);
    flex: 1;
    margin-right: 10px;
  }

  .oper_btn_content {
    margin-top: 10px;

    .el-button {
      float: right;
    }
  }
}
</style>
